<template>
    <div class="export-btn">
        <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            :disabled="exportLoading"
            @click="handleExport"
            >导出</el-button>
    </div>
</template>

<script>

export default {
    props:{
        // 请求的接口地址
        api: Function
    },
    data: () =>{
        return {

            exportLoading: false,
            page: {
                    pageNum: 1,
                    pageSize: 10,
                },
        }
    },
    created() {
    },
    methods:{
        handleExport() {
        
        let { exportLoading,api,download } = this;
        // 不存在api
        if (!api || exportLoading) return;
        
        this.$confirm('是否确认导出数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
           this.api(this.page).then( (res) =>{
              download(res.msg);
          this.exportLoading = false;
          }).catch(() => {});
        })
    },
    
    }
}
</script>

<style lang="scss" scoped>

</style>